<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/person.css">
  <link rel="stylesheet" href="../fonts/person/iconfont.css">
</head>

<body>
  <div class="tencent">

    <!-- 顶部start -->
    <div class="app-top">

      <!-- 左侧 -->
      <div class="top-left">
        <div class="logo">
          <h1>
            <a href="index.html" title="腾讯视频">腾讯视频</a>
          </h1>
        </div>
        <ul>
          <li><a href="#" data-id="0">首页</a></li>
          <li><a href="#" data-id="1">电视剧</a></li>
          <li><a href="#" data-id="2">电影</a></li>
          <li><a href="#" data-id="3">综艺</a></li>
          <li><a href="#" data-id="4">动漫</a></li>
          <li><a href="#" data-id="5">少儿</a></li>
          <li><a href="#" data-id="6">纪录片</a></li>
          <li><a href="#" data-id="7">游戏</a></li>
          <li><a href="#" data-id="8" title="展开更多频道">全部</a><i class=""></i></li>
        </ul>
      </div>

      <!-- 右侧 -->
      <div class="top-right">
        <div class="search">
          <input type="text" placeholder="承欢记">
          <div class="search-button">
            <i class="iconfont icon-sousuo"></i>
            <span>全网搜</span>
          </div>
          <a href="#" class="hot">
            <i class="iconfont icon-resoubang_0912"></i>
            <span>热搜榜</span>
          </a>
        </div>
        <!-- 用户应用 -->
        <div class="user-nav">
          <div class="vip">
            <a href="#"><i class="iconfont icon-gonggong-VIP" title="VIP频道"></i></a>
          </div>
          <div class="game">
            <a href="#"><i class="iconfont icon-youxiji" title="游戏"></i></a>
          </div>
          <div class="record">
            <a href="#"><i class="iconfont icon-lishijilu"></i></a>
          </div>
          <div class="createcenter">
            <a href="#"><i class="iconfont icon-record-video" title="创作中心"></i></a>
          </div>
          <div class="version">
            <a href="#"><i class="iconfont icon-diannao"></i></a>
          </div>
          <div class="user">
            <a href="#">
              <img src="../images/yuan.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="body-wrap">
      <article>
        <div class="user-info">
          <div class="user-avatar">
            <img src="../images/yuan.jpg" alt="">
            <button class="toggle">
              <i class="iconfont icon-geren"></i>
              <span>切换</span>
            </button>
            <input type="file" class="file">
          </div>
          <div class="user-name">
            <span class="nickname"></span>
          </div>
          <div class="user-vipinfo">
            <a href="#">
              <span>开通VIP/SVIP 看大片</span>
            </a>
          </div>
          <button class="kaitong">开通</button>
        </div>
        <div class="creation">
          <a href="#">
            <i class="iconfont icon-record-video"></i>
            <span>创作平台</span>
          </a>
        </div>
        <div class="channel">
          <a href="#">
            <i class="iconfont icon-geren"></i>
            <span>个人主页</span>
          </a>
        </div>
        <div class="user-list">
          <ul>
            <li class="active" data-id="0">
              <a href="#">
                <i class="iconfont icon-lishijilu"></i>
                <span>观看历史</span>
              </a>
            </li>
            <li data-id="1">
              <a href="#">
                <i class="iconfont icon-menu-left"></i>
                <span>加追</span>
              </a>
            </li>
            <li data-id="2">
              <a href="#">
                <i class="iconfont icon-shoucang"></i>
                <span>收藏</span>
              </a>
            </li>
            <li data-id="3">
              <a href="#">
                <i class="iconfont icon-collection"></i>
                <span>订阅</span>
              </a>
            </li>
            <li data-id="4">
              <a href="#">
                <i class="iconfont icon-shangchuan"></i>
                <span>上传视频</span>
              </a>
            </li>
            <li data-id="5">
              <a href="#">
                <i class="iconfont icon-VIP"></i>
                <span>VIP会员</span>
              </a>
            </li>
            <li data-id="6">
              <a href="#">
                <i class="iconfont icon-zuanshi"></i>
                <span>我的钻石</span>
              </a>
            </li>
            <li data-id="7">
              <a href="#">
                <i class="iconfont icon-zhanghaoshezhi"></i>
                <span>账号设置</span>
              </a>
            </li>
            <li data-id="8">
              <a href="#">
                <i class="iconfont icon-dingdan"></i>
                <span>订单</span>
              </a>
            </li>
          </ul>
        </div>
      </article>
      <aside>
        <div class="bodyContainer">
          <div class="history item active">
            <div class="history-header">
              <h1>观看历史</h1>
              <div class="delete">
                <i class="iconfont icon-shanchu"></i>
                <span>清除全部</span>
              </div>
            </div>
            <div class="history-body">
              <!-- <div class="history-item">
                <img src="" alt="">
                <span></span>
              </div> -->
            </div>
          </div>
          <div class="add item"></div>
          <div class="collect item">
            <div class="collect-header">
              <h1>收藏记录</h1>
              <div class="delete">
                <i class="iconfont icon-shanchu"></i>
                <span>清除全部</span>
              </div>
            </div>
            <div class="collect-body">
              <!-- <div class="history-item">
                  <img src="" alt="">
                  <span></span>
              </div> -->
            </div>
          </div>
          <div class="subscrible item"></div>
          <div class="upload item"></div>
          <div class="VIP item"></div>
          <div class="diamond item"></div>
          <div class="setting item">
            <div class="setting-wrapper">
              <span class="setting-title">账号注销</span>
              <span class="setting-scribe">账号注销相关的操作管理</span>
            </div>
            <div class="setting-btn">注销</div>
          </div>
          <div class="order item"></div>
        </div>
      </aside>
    </div>
    <div class="background-shadow">
      <!-- 修改密码框 -->
      <div class="box">
        <header class="box-header">
          <i class="iconfont icon-xiangzuolajiantou"></i>
          <span>QQ密码修改</span>
          <i class="iconfont icon-shanchu1"></i>
        </header>
        <h3>修改后要记住新密码喵</h3>
        <div class="box-body">
          <article>
            <h4>密码修改</h4>
            <input type="password" placeholder="请输入原来的密码" class="password-prev">
            <input type="password" placeholder="请输入修改的密码" class="password-next">
            <button class="login">修改</button>
            <div class="function">
              <a href="#">找回密码</a>
              <a href="#" class="register">注册账号</a>
              <a href="#">意见反馈</a>
            </div>
          </article>
          <aside>
            <ul>
              <li>
                <input type="checkbox" id="all" checked>
                <label for="all">全选 <a href="index.html">腾讯视频</a> 将获取以下权限:</label>
              </li>
              <li>
                <input type="checkbox" id="information" checked disabled>
                <label for="information">使用你的QQ头像、昵称信息</label>
              </li>
            </ul>
            <p>授权即同意<a href="#">服务协议</a>和<a href="#">QQ隐私保护指引</a></p>
          </aside>
        </div>
      </div>
    </div>
  </div>
  <script src="../js/person.js"></script>
</body>

</html>